// axios封装
// 供api模块使用

// 怎么封装？
import axios from 'axios'
import store from '@/store'
// 1.实例化
const instance = axios.create({
  baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net', // 基地址
  timeout: 10000 // 接口超时时间配置
})
// 2.请求拦截器
// 1. 把token拿到放到请求头中 request headers
instance.interceptors.request.use((config) => {
  // 在发送请求之前做些什么
  const token = store.state.user.profile.token
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
}, (error) => {
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 3.响应拦截器
// 1. token失效 401
// 2. 以后端自定义的接口状态码做判断处理返回数据和自定义错误抛出
instance.interceptors.response.use((response) => {
  // 2xx作为成功的判断
  return response.data
}, (error) => {
  // 不在200-300之间就会走错误
  return Promise.reject(error)
})

// 封装一个自定义的方法 给api模板做一层简单的封装
// 目的是方便 接口发送的时候 可以无视get/post请求 做参数兼容
// 需求描述
/**
 * 1. 封装一个函数 名称为request
 * 2. 这个函数接收三个参数 分别是url,method,reqData(对象)
 * 3. 这个函数的执行结果要求是一个promise对象 业务中可以这样来用
 *    request('url','GET',{}).then(res=>{})
 * 4. 用户不管是传递get/post，我们都能正确处理axios的参数
 */

// get
// 项目本身它只设计到俩种method get post
// 封装不是固定的 跟着实际项目走的
function request (url, method, reqData) {
  // 1. 发送请求
  // 2. 返回一个promise对象
  return instance({
    url,
    method,
    // 根据传入的method适配 key 到底是params还是data
    // get -> params  post -> data
    // 给method统一转成大写之后然后再比较
    // 健壮性会好
    [method.toUpperCase() === 'GET' ? 'params' : 'data']: reqData
  })
}

export default request
